<template>
    <div
        class="service-ad-pic_wrapper"
        v-loading="loading"
        element-loading-background="rgba(233,233,235, 0.8)"
        style="width: 100%"
    >
        <div class="table-list">
            <ElTable :data="tableData">
                <ElTableColumn prop="domain" label="租户域名"></ElTableColumn>
                <ElTableColumn prop="name" label="租户名"></ElTableColumn>
                <ElTableColumn prop="number" label="企业信用码"></ElTableColumn>
                <ElTableColumn prop="status" label="状态">
                    <template #default="scope">
                        <span v-if="scope.row.status === 1">待注册</span>
                        <span v-if="scope.row.status === 2">已注册</span>
                        <span v-if="scope.row.status === 3">已注销</span>
                    </template>
                </ElTableColumn>
                <ElTableColumn label="操作">
                    <template #default="scope">
                        <ElButton
                            v-if="scope.row.status === 1"
                            type="text"
                            size="small"
                            @click="handleClick(scope.row, 2)"
                        >
                            注册
                        </ElButton>
                        <ElButton
                            v-if="scope.row.status === 2"
                            type="text"
                            size="small"
                            @click="handleClick(scope.row, 3)"
                        >
                            注销
                        </ElButton>
                    </template>
                </ElTableColumn>
            </ElTable>
            <ElPagination
                class="mt20"
                @current-change="handleCurrentChange"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="totals"
            ></ElPagination>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { getTenants, setTenant } from '@/api/api.query.util';
import { debounce } from '@/utils/utils';
import { ElMessage } from 'element-plus';

const currentPage = ref(1);
const totals = ref(0);
const loading = ref(false);

const tableData = ref([]);
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

initTable();

function initTable() {
    getTenants({
        method: 'post',
        data: {
            current: currentPage.value,
            size: 10,
        },
    }).then((res) => {
        tableData.value = res.result.records;
        totals.value = res.result.total;
    });
}

function handleCurrentChange(current: any) {
    currentPage.value = current;
    initTable();
}

function handleClick(row: any, status: number) {
    loading.value = true;
    debounce(() => {
        setTenant({
            method: 'put',
            data: {
                number: row.number,
                status,
            },
        }).then(() => {
            loading.value = false;
            ElMessage.success('操作成功');
            initPage();
            initTable();
        });
    }, 500);
}

function initPage() {
    currentPage.value = 1;
}
</script>

<style lang="scss" scoped>
.service-ad-pic_wrapper {
    display: flex;
    flex-grow: 1;
}

.table-list {
    border-radius: 4px;
    background-color: #ffffff;
    padding: 20px;
    flex-grow: 1;
}
.mt20 {
    margin-top: 20px;
}
</style>
